<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/lunbotu.css">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/home-footer.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="lib/animate.min.css">
    <script src="lib/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js"></script>
    <script src="js/lh-home.js"></script>
    <title>首页</title>
</head>

<body>
    <!--顶部-->
    <div class="top">
        <!--顶部板心-->
        <div class="zyq-top w">
            <!--顶部logo-->
            <div class="zyq-logo fl">
                <img src="images/logo.png" alt="">
            </div>
            <!--顶部导航栏-->
            <div class="top-nav clearfix fl">
                <ul class="clearfix">
                    <li><a href="lh-home.html">首页</a></li>
                    <li><a href="page/whereof.html">关于我们</a></li>
                    <li><a href="page/hcy-gsxw.html">公司新闻</a></li>
                    <li><a href="page/food.html">产品展示</a></li>
                    <li><a href="page/tuandui.html">团队展示</a></li>
                    <li><a href="page/zyq-lxwm.html">联系我们</a></li>
                </ul>
            </div>
            <!--顶部搜索框-->
            <div class="top-search fl clearfix">
                <input type="text" value="请输入关键词" id="topTxt" class="topTxt">
                <span id="topBtn"><i class="iconfont icon-sousuo"></i></span>
            </div>
            <script>
                $(function () {
                    //注册输入框获得光标事件
                    $('#topTxt').focus(function () {
                        //判断输入框里的内容是否和原来文本相同；是则清空
                        if ($('#topTxt').val() === '请输入关键词') {
                            $(this).val('');
                        }
                        ;
                    });
                    $('#topTxt').blur(function () {
                        //判断输入框里的内容是否为空，为空则回到初始文本，不为空则不改动里面的内容；
                        if ($('#topTxt').val() === '') {
                            $(this).val('请输入关键词');
                        }
                        ;
                    });
                    $('#topBtn').click(function () {
                        $('#topTxt').val('');
                    })
                })
            </script>
            <!--购物车部分-->
            <div class="top-shop fl">
                <i class="iconfont icon-gouwuche"></i>
                <span>0</span>
            </div>
        </div>
    </div>

    <!--轮播图！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！-->
    <div id="slideBox" class="slideBox">
        <div class="hd">
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        </div>
        <div class="bd">
            <ul>
                <li><img src="images/homePage/-1172.png" width="1920px" />
                    <div>

                        <h5>Make with love</h5>
                        <span>用心做</span>
                        <p>Green onion,ginger and farlic are</p>
                        <p>ChineseFavorite flavor of vegetables to say to in a day</p>
                        <p>Essential in the kitchen</p>
                        <a href="">OUR MENU</a>
                    </div>
                </li>
                <li><img src="images/homePage/-2028.png" />
                    <div class="bd-div2">
                        <h5>美食网站</h5>
                        <span>第六组</span>
                        <p>食为先</p>
                        <p>吃遍天下</p>
                        <p>民以食为天</p>
                        <p>唯独美食不可辜负</p>
                        <p>你值得拥有</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!-- the menu 菜单 -->
    <div class="menu pr">
        <!-- 菜单1 -->
        <div class="menu1">
            <div class="food1 pa">
                <img src="images/homePage/-1204.png">
            </div>
            <div class="text1 pa">
                <img src="images/homePage/中餐艺术.png" width="500px" height="300px">
            </div>
            <!-- 厨师 -->
            <div class="chef pa">
                <h3>烹调师</h3>
                <img src="images/homePage/-1211.png" alt="烹调师">
                <span class="chefName pa"><strong>Caesar</strong></span>
                <span class="chefLevel pa"><strong>Senior</strong></span>
            </div>
        </div>
        <!-- 分割线 -->
        <img src="images/homePage/-1213.png" alt="The Menu">
        <!-- 菜单2 -->
        <div class="menu2">
            <div class="text2 pa">
                <img src="images/homePage/中餐艺术2.png" alt="中餐艺术2" width="450px">
                <img src="images/homePage/浙江菜.png" alt="浙江菜" width="450px">
            </div>
            <div class="food2 pa">
                <img src="images/homePage/-1205.png">
            </div>
            <img src="images/homePage/-1207.png" alt="" class="bg1 pa" width="150px">
            <img src="images/homePage/-1220.png" alt="" class="bg2 pa" width="300px">
            <div class="star pa">
                <img src="images/homePage/-1222.png">
                <img src="images/homePage/-1222.png">
                <img src="images/homePage/-1222.png">
                <img src="images/homePage/-1222.png">
                <img src="images/homePage/-1221.png">
            </div>
        </div>
    </div>

    <!-- 菜品配料 -->
    <div class="caipin pr">
        <img src="images/homePage/-1401.png" alt="" class="caipinbg pa">
        <div class="caipin-info pa">
            <span class="cp-title pa">各种菜品配料</span>
            <img src="images/homePage/-1210.png" alt="cp-slogan" width="413px" height="50px" class="pa">
            <div class="description pa">
                <p>中餐讲究</p>
                <p>“色、香、味、意、形、养”</p>
                <p>材料产品，可以使菜肴风味更佳</p>
                <p>增加菜肴的色泽。</p>
                <p>干辣椒品种很多</p>
                <p>有大金条，二金条，五叶椒，朝天椒，</p>
                <p>七重椒，大辣椒和小米椒等</p>
            </div>
        </div>
    </div>

    <!-- 菜谱 -->
    <div class="caipu pr">
        <div class="w pr">
            <div class="caipu1 pa">
                <img src="images/homePage/-1198.png" alt="">
                <div class="mask pa">
                    <span>Delicious food</span>
                    <a href="#" class="more">更&nbsp;多</a>
                </div>
            </div>
            <div class="caipu2 pa">
                <a href="#">
                    <img src="images/homePage/-1199.png" alt="">
                </a>
            </div>
            <div class="caipu3 pa">
                <a href="#">
                    <img src="images/homePage/-1415.png" alt="">
                </a>
            </div>
            <div class="caipu4 pa">
                <a href="#">
                    <img src="images/homePage/-1416.png" alt="">
                </a>
            </div>
            <div class="caipu5 pa">
                <a href="#">
                    <img src="images/homePage/-1417.png" alt="">
                </a>
            </div>
            <div class="caipu6 pa">
                <a href="#">
                    <img src="images/homePage/-1418.png" alt="">
                </a>
            </div>
            <!-- 菜谱列表 -->
            <div class="caipu-list">
                <a href="#" class="cpl-1 pa">
                    <span class="num fl">01.&nbsp;</span>
                    <span class="name fl">清蒸南瓜</span>
                    <span class="engname fl">Steamed hairy crab</span>
                </a>
                <a href="#" class="cpl-2 pa">
                    <span class="num fl">02.&nbsp;</span>
                    <span class="name fl">泼绿沙</span>
                    <span class="engname fl">Pour the green sand</span>
                </a>
                <a href="#" class="cpl-3 pa">
                    <span class="num fl">03.&nbsp;</span>
                    <span class="name fl">三明治卷</span>
                    <span class="engname fl">New England Lobster Roll</span>
                </a>
                <a href="#" class="cpl-4 pa">
                    <span class="num fl">04.&nbsp;</span>
                    <span class="name fl">花式甜饼</span>
                    <span class="engname fl">Petits fours</span>
                </a>
                <a href="#" class="cpl-5 pa">
                    <span class="num fl">05.&nbsp;</span>
                    <span class="name fl">拌面</span>
                    <span class="engname fl">Sesame butter</span>
                </a>
                <a href="#" class="cpl-6 pa">
                    <span class="num fl">06.&nbsp;</span>
                    <span class="name fl">苏香饼</span>
                    <span class="engname fl">Su Xiang cake</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 关于我们 -->
    <div class="about">
        <div class="w pr">
            <img src="images/homePage/-1426.png" class="about-bg pa">
            <div class="about-text pa">
                <h3>About us</h3>
                <p>We don't have guarded hierarchy</p>
                <p>每个员工都是平等的，每一个时刻都是同事的合作伙伴。没有魅力等于温柔的心。</p>
                <p>Food standards are the same,</p>
                <p>fatct.</p>
            </div>
            <a href="#" class="about-more pa">查看更多</a>
        </div>
    </div>

    <!--尾部-->
    <div class="gzq-footer clearfix">
        <div class="gzq-footer-banxin">
            <div class="gzq-footer-dl">
                <dl>
                    <dt>帮助中心</dt>
                    <dd>订餐指南</dd>
                    <dd>配送方式</dd>
                    <dd>支付方式</dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd>售后反馈</dd>
                    <dd>意见反馈</dd>
                    <dd>手机版</dd>
                </dl>
                <dl>
                    <dt>关于我们</dt>
                    <dd>了解我们</dd>
                    <dd>联系我们</dd>
                    <dd>管理后台</dd>
                </dl>
            </div>
            <div class="gzq-footer-right">
                <div class="gzq-footer-erweima">
                    <p> 扫码有惊喜</p><img src="images/homePage/-1187.png" alt="">
                </div>
                <div class="gzq-footer-line"></div>
                <div class="gzq-footer-phone">
                    <span class="gzq-footer-phonenumber"><a href="">400-xxx-0000</a></span>
                    <span class="gzq-footer-phonetime">24小时在线</span>
                </div>
            </div>
            <div class="gzq-footer-banquan">
                <span>版权所有:<a href="">六组有限公司</a></span>
                <span>备案号:<a href="">传智313</a></span>
            </div>
        </div>
    </div>

    <!-- 轮播图js -->
    <script>
        $(function () {
            // effect 轮播图效果 fold:淡入淡出 || topLoop:上循环滚动 || leftLoop:左循环滚动;
            $(".slideBox").slide({ mainCell: ".bd ul", autoPlay: true, effect: 'leftLoop' });
        });
    </script>
</body>

</html>